<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h2 class="title">{{ name }}</h2>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="container">
                <div class="tabs is-centered is-fullwidth is-large">
                    <ul>
                        <li :class="{'is-active': step == 'name'}" @click="step = 'name'">
                            <a>Name</a>
                        </li>
                        <li :class="{'is-active': step == 'questions'}" @click="step = 'questions'">
                            <a>Questions</a>
                        </li>
                        <li :class="{'is-active': step == 'review'}" @click="step = 'review'">
                            <a>Review</a>
                        </li>
                    </ul>
                </div>
                <div class="columns">
                    <div class="column is-half is-offset-one-quarter">
                        <div class="name" v-show="step === 'name'">
                            <div class="field">
                                <label class="label is-large" for="name">Survey name:</label>
                                <div class="control">
                                    <input
                                        type="text"
                                        class="input is-large"
                                        id="name"
                                        v-model="name"
                                    />
                                </div>
                            </div>
                        </div>

                        <div class="questions" v-show="step === 'questions'">
                            <new-question v-on:questionComplete="appendQuestion" />
                        </div>

                        <div class="review" v-show="step === 'review'">
                            <ul>
                                <li
                                    class="question"
                                    v-for="(question, qIdx) in questions"
                                    :key="`question-${qIdx}`"
                                >
                                    <div class="title">
                                        {{ question.question }}
                                        <span
                                            class="icon is-medium is-pulled-right delete-question"
                                            @click.stop="removeQuestion(question)"
                                        >
                                            <i class="fa fa-times" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <ul>
                                        <li
                                            v-for="(choice , cIdx) in question.choices"
                                            :key="`choice-${cIdx}`"
                                        >{{ cIdx + 1 }}. {{ choice }}</li>
                                    </ul>
                                </li>
                            </ul>

                            <div class="control">
                                <a class="button is-large is-primary" @click="submitSurvey">Submit</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import NewQuestion from "@/components/NewQuestion";

export default {
    components: { NewQuestion },
    data() {
        return {
            step: "name",
            name: "",
            questions: []
        };
    },
    methods: {
        appendQuestion(newQuestion) {
            this.questions.push(newQuestion);
        },
        removeQuestion(question) {
            const idx = this.questions.findIndex(
                q => q.question === question.question
            );
            this.questions.splice(idx, 1);
        },
        submitSurvey() {
            this.$store
                .dispatch("submitNewSurvey", {
                    name: this.name,
                    questions: this.questions
                })
                .then(() => this.$router.push("/"))
                .catch(error => {
                    console.log("Error creating survey", error);
                    this.$router.push("/");
                });
        }
    }
};
</script>

<style>
.question {
    margin: 10px 20px 25px 10px;
}

.delete-question {
    cursor: pointer;
    padding: 10px;
}

.delete-question:hover {
    background-color: lightgray;
    border-radius: 50%;
}
</style>
